<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="maximum-scale=3, minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no">
		<title>支付</title>
		<meta name="description" content="">
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/pay.css" />
		<link rel="stylesheet" href="../../css/noPay.css" />
		<script type="text/javascript" src="../../js/base.js" ></script>
		<script type="text/javascript" src="../../js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="../../js/vue.js" ></script>
		<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js" ></script>
	</head>
	<body>
		<div class="vue">
			<div class="flex-left mch">
				<div class="mch-img">
					<img src="../../img/shanghu.png" class="w"/>
				</div>
				<div class="mch-name">
					<p class="name flex-left">{{mchInfo.mchName}}</p>
					<!--<p class="mch-type"><block class="type">门店</block><block class="address">山东路旗舰店</block></p>-->
				</div>
			</div>
			<div class="flex-center pay-money">
				<p class="p flex-center"><a>支 付:</a><a class="money">{{payInfo.currentPrice}}元</a></p>
				<p class="yue" v-if="payInfo.toNext=='LOW_BALANCE'&&payInfo.balance>0">会员储值可支付<a>{{payInfo.balance}}</a>元</p>
			</div>
			<div class="vip">
				<!--<img src="img/xian.png" class="w"/>-->
				<div class="bj">
					<div class="flex-auto">
						<div></div>
						<div></div>
					</div>
					<div></div>
				</div>
				<div class="img flex-center w">
					<img src="../../img/vip.png" style="width: 23.3vw;"/>
				</div>
				<div class="content flex-left">
					<img src="../../img/mch-img.png" style="width: 56.4vw;" v-if="payInfo.toNext=='FREE'"/>
					<img src="../../img/hs.png" style="width: 39vw;" v-else/>
					<p class="protocol" @click="href()">&lt;充值协议&gt;</p>
					<ul>
						<li v-for="(item,index) in payInfo.chargeItem" class="flex-left" :class="[indexThat==index?'that':'']" @click="indexThat=index">
							<div class="radio">
								<img src="../../img/input.png" class="w" />
								<img src="../../img/input-that.png" class="w no" />
							</div>
							<p v-if="item.activityType==2">充值￥{{item.chargePrice}}元，当餐免单</p>
							<p v-if="item.activityType==1">充值￥{{item.chargePrice}}元，可节省￥{{item.rewardPrice}}</p>
						</li>
					</ul>
				</div>
				<div class="top-ups flex-center w">
					<div class="flex-center" @click="submit('CHARGE')">立即充值</div>
				</div>
			</div> 
			<div class="wx-pay flex-center" @click="submit('WX')">
				<img src="../../img/wx.png" style="width: 6.3vw;"/>
				<p>微信付款</p>
				<img src="../../img/right.png"  style="width: 2.8vw;"/>
			</div>
		</div>	
	</body>
	<script>

		var vue=new Vue({ 
			el:".vue",
			data:{
				mchInfo:null,
				payInfo:null,
				indexThat:null
			},
			mounted(){
			 	this.mchInfo=JSON.parse(localStorage.mchInfo);
			 	this.payInfo=JSON.parse(localStorage.payInfo);
			},
			methods: {
				
				// 充值协议
				href(){
					location.href="protocol.html";
				},
				
				// 充值或支付
			    submit(payType){
			    	var mchInfo=vue.mchInfo;
			    	var currentPrice=vue.payInfo.currentPrice;
			    	if(payType=='CHARGE'){
			    		if(vue.indexThat==null){
			    			hint("请先选择充值金额");
			    		}else{
			    			var activeType=vue.payInfo.chargeItem[vue.indexThat].id;
			    			localStorage.memTransType="CHARGE";
			    		}
			    	} else {
			    		var activeType="";
			    	}
			    	
			    	var data={
			    		mchKey:localStorage.mchKey,
			    		memKey:mchInfo.memKey,
						currentPrice:currentPrice,
						browerType:localStorage.browerType,
						tradeTag:mchInfo.tradeTag,
						activeType: activeType,
						payType: payType,
						toNext: vue.payInfo.toNext,
						memTransType: localStorage.memTransType,
						orderNo:localStorage.orderNo
					};
			            	
			    	$.ajax({
						type:"post",
						url:url+"pay_money",
						data:data,
						success:function(e){
							if(e.code=="0000"){
								localStorage.result=JSON.stringify(e.result);
								localStorage.currentPrice=currentPrice;
								let payInfo=JSON.parse(e.result.payParams.payInfo);
								if(payType=='CHARGE'){
									wxPay(payInfo,function(){
										if(localStorage.orderNo){
											var url="/pages/index/order/order-details/order-details?orderNo="+localStorage.orderNo;
											closePay(url);
										} else {
											closePay();
										}
									});
								} else if(payType=='WX'){
									wxPay(payInfo,function(){
										if(localStorage.orderNo){
											var url="/pages/index/navigationbar/navigationbar?iconPageThat=order&orderNo="+localStorage.orderNo;
											closePay(url,{
												iconPageThat:"order",
												orderNo:localStorage.orderNo
											});
										} else {
											closePay();
										}
									});
								}
							} else {
								hint(e.msg);
							}
						},
						error:function(e){
			    			hint(e.msg);
			    		}
					});
			   	}
			}
		});
	</script> 
</html>